<template>
    <div class="mainBox" ref="scrollRef">
        <van-cell-group inset class="form">
            <van-field
                v-model="data.context"
                rows="2"
                autosize
                label="发布瞬间"
                type="textarea"
                maxlength="50"
                placeholder="请输入瞬间"
                show-word-limit
                label-align="left"
                label-width="60"
                label-class="labelleft"
                clearable
            />
        </van-cell-group>
        <van-row justify="end"
            ><van-col span="6" class="col">
                <van-button type="success" class="btn" size="small" @click="saveInstant" :loading="data.loading"
                    >点击发布</van-button
                >
            </van-col></van-row
        >
        <van-swipe-cell v-for="item in data.list" :key="item.id">
            <div class="itemBox">
                <div class="headerBox">
                    <img class="img" :src="tmp + item.img" alt="" />
                    <div class="username">{{ item.username }}</div>
                </div>
                <div class="context">{{ item.context }}</div>
                <div :class="['likeBox', !item.showFlag ? '' : 'border']">
                    <div class="left">{{ getDate(item.created_at) }}</div>
                    <div class="right">
                        <div v-if="!item.showLoading" :class="['rightItem', item.flag ? 'like' : 'nolike']" @click="like(item)">
                            点赞:{{ item.likeNum ? item.likeNum : 0 }}
                        </div>
                        <div v-else :class="['rightItem', item.flag ? 'like' : 'nolike']">
                            <van-loading type="spinner" size="8px" />
                        </div>
                        <div class="rightItem" @click="openBox(item)">评论{{ item.commentNum }}</div>
                    </div>
                </div>
            </div>
            <template #right>
                <van-button
                    square
                    text="删除"
                    type="danger"
                    class="deleteBox delete-button"
                    @click="deleteItem(item)"
                />
            </template>
        </van-swipe-cell>

        <div class="bottomBox" v-if="!showBoxLoading">加载完成</div>
        <div class="bottomBox" v-else>加载中...</div>
    </div>
</template>
<script lang="ts" setup>
import { onMounted, ref } from "vue"
import { useRouter} from "vue-router"
import { createInstant, getListById, instantlist, createlike } from "./api"
import { showNotify } from "vant"
import { getDate } from "@/utils/common"
type DataType = {
    pageIndex: number
    pageSize: number
    loading: boolean
    context: string
    userId?: number
    list: Array<instantlist>
    count: number
}
const tmp = ref(
    import.meta.env.VITE_ENV === "development" ? "http://localhost:9001/static/" : "http://49.232.228.40:9001/static/"
)
const scrollRef = ref()
const showBoxLoading = ref(false)
const data = ref<DataType>({
    pageIndex: 1,
    pageSize: 10,
    loading: false,
    //文章内容
    context: "",
    //用户id
    userId: undefined,
    list: [
        // {
        //     id: undefined,
        //     userId: undefined,
        //     username: "",
        //     title: "",
        //     context: "",
        //     likeNum: undefined,
        //     image: "",
        //     created_at: "",
        //     commentNum: undefined,
        //     showFlag: false
        // }
    ],
    count: 0
})
const router = useRouter()
const saveInstant = async () => {
    // data.value.userId=JSON.parse(localStorage.getItem("userInfo")!).id
    console.log(data.value.context, data.value.userId)
    let param = {
        userId: data.value.userId,
        context: data.value.context
    }
    let res = await createInstant(param)
    console.log(res)
    if (res.code === 0) {
        showNotify({ type: "primary", message: res.msg })
        data.value.pageIndex = 1
        data.value.context = ""
        await getList()
    } else {
        showNotify({ type: "danger", message: res.msg })
    }
}
const getList = async () => {
    let res = await getListById({
        userId: data.value.userId!,
        pageIndex: data.value.pageIndex,
        pageSize: data.value.pageSize
    })
    console.log(res)
    if (res.code === 0) {
        data.value.list = res.body.list
        data.value.count = res.body.count
    }
}
onMounted(async () => {
    data.value.userId = JSON.parse(localStorage.getItem("userInfo")!).id
    await getList()
    console.log(scrollRef.value)
    scrollRef.value.addEventListener("scroll", async (_e: any) => {
        const { scrollTop, offsetHeight, scrollHeight } = scrollRef.value
        if (scrollTop + offsetHeight >= scrollHeight) {
            console.log("到达底部")
            showBoxLoading.value = false
            if (data.value.list.length < data.value.count) {
                showBoxLoading.value = true
                data.value.pageIndex += 1
                let res = await getListById({
                    userId: data.value.userId!,
                    pageIndex: data.value.pageIndex,
                    pageSize: data.value.pageSize
                })
                console.log(res)
                if (res.code === 0) {
                    res.body.list.map((item) => {
                        data.value.list.push(item)
                        return item
                    })
                    data.value.count = res.body.count
                }
                showBoxLoading.value = false
            } else {
                showBoxLoading.value = false
            }
        }
    })
})

const openBox = (item: instantlist) => {
    console.log("打开详情")
    router.push({path:"/comment",query:{id:JSON.stringify(item.id)}})
    
}
const like = async (item: instantlist) => {
    console.log(item.userId)
    item.showLoading=true
    let res = await createlike({ instant_id: item.id as number, flag: item.flag ? 1 : 0 })
    if(res.code===0){
        if(item.flag){
            item.flag=false
            item.likeNum!-=1
        }else{
            item.flag=true
            item.likeNum!+=1
        } 
    }
    item.showLoading=false
}
const deleteItem = (item: instantlist) => {
    console.log(item)
}
</script>
<style lang="less" scoped>
.mainBox {
    background-color: #f1f1f1f1;
    width: 100vw;
    height: 100vh;
    padding: 10px;
    padding-bottom: 65px;
    overflow-y: scroll;
    .form {
        margin: 0px;
        /deep/.labelleft {
            color: #1d191942;
        }
    }
    .col {
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }
    .btn {
        margin: 10px 0px;
        width: 70px;
        // background-color: black;
    }

    .itemBox {
        background-color: white;
        margin: 5px 0px;
        padding: 10px;
        border-radius: 10px;
        .headerBox {
            display: flex;
            justify-content: flex-start;
            align-items: flex-end;
            margin: 0px 0px 10px 0px;
            .img {
                width: 30px;
                height: 30px;
                margin-right: 5px;
            }
            .username {
                margin: 0px 0px 0px 0px;
                font-size: 12px;
            }
        }

        .context {
            font-size: 16px;
            margin-bottom: 10px;

            word-wrap: break-word;
        }
        .likeBox {
            font-size: 12px;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            .left {
            }
            .right {
                display: flex;
                justify-content: flex-start;
                .rightItem {
                    margin-left: 5px;
                    .num {
                    }
                }
                .like {
                    background-color: rgb(248, 76, 76);
                    border-radius: 2px;
                    padding: 0px 2px;
                }
                .nolike {
                    background-color: rgb(189, 188, 188);
                    border-radius: 2px;
                    padding: 0px 2px;
                }
            }
        }
        .border {
            border-bottom: 1px dashed #f1f1f1f1;
        }
        .commentBox {
            padding: 10px 0px;
            font-size: 12px;
            color: #3b3b3bf1;
            transition: 0.3s ease-in;
        }
        .falseBox {
            height: 0px;
            transition: 0.3s ease-in;
            overflow: hidden;
            font-size: 12px;
            color: white;
        }
    }
    /deep/.deleteBox {
        height: 100%;
    }
    .bottomBox {
        font-size: 14px;
        text-align: center;
        color: #616161f1;
    }
}
</style>
